<template>
  <div>
    <h2>当前求和:{{ sum }}</h2>
    <button @click="sum++">点击+1</button>
    <hr>
    <h2>当前信息为:{{ msg }}</h2>
    <button @click="msg=msg+'!'">修改信息</button>

    <h1>姓名: {{ person.name }}</h1>
    <h1>年龄: {{ person.age }}</h1>
    <h1 >薪资: {{ person.job.job1.salary }}k</h1>
<button @click="person.name+='~'">修改姓名</button>
<button @click="person.age++">修改年龄</button>
<button @click="person.job.job1.salary++">涨薪</button>
  </div>
</template>
<script>
import { ref, watch, reactive } from "vue";

export default {
  name: "Demo",
  // watch:{
  //   sum:{
  //     immediate:true,
  //     handler(newVal,oldVal){
  //       console.log(newVal,oldVal)
  //     }
  //   }
  // },
  setup(props, context) {
    let sum = ref(0);

    let msg =ref("你好啊")

    let person = reactive(
      {
      name:"JJ",
      age:18,
      job:{
        job1:{
          salary:20
        }
      }
    }
    )

    //情况一:监视ref所定义的一个响应式数据
    watch(sum, (newVal, oldVal) => {
      console.log(newVal, oldVal);
    },{immediate:true});

    //情况二:监视ref所定义的多个响应式数据
    watch([sum,msg], (newVal, oldVal) => {
      console.log(newVal, oldVal);
    },{immediate:true});

    //情况三：监视reactive所定义的响应式数据的全部属性
    // 1.oldvalue获取值错误  2.强制开启深度监视(deep:false无效)
    watch(person, (newVal, oldVal) => {
      console.log(newVal, oldVal);
    },{deep:false});

    //情况四：监视reactive所定义的响应式数据的某个属性,可以用函数

    // watch(()=>person.age, (newVal, oldVal) => {
    //   console.log(newVal, oldVal);
    // },{deep:false});


    //情况五：监视reactive所定义的响应式数据的某些属性
    // watch([()=>person.age,()=>person.name], (newVal, oldVal) => {
    //   console.log(newVal, oldVal);
    // },{deep:false});

    // 特殊情况
    // watch(()=>person.job, (newVal, oldVal) => {
    //     console.log(newVal, oldVal);
    //   },{deep:true});
    //返回一个对象，常用
    return {
      sum,
      msg,
      person
    };
  }
};
</script>
  
  <style>
</style>
  
 